import { createVNode, render } from 'vue'
import XtxConfirm from './xtx-confirm.vue'

const div = document.createElement('div') // 装载组件的dom容器
div.setAttribute('class', 'xtx-confirm-container') // 给容器加上标识
document.body.appendChild(div) // 把容器放在body上

export default ({ title, text }) => {
  // 把组件编译为dom节点

  return new Promise((resolve, reject) => {
    // 取消
    function cancelCallback () {
      render(null, div) // 销毁组件
      reject(new Error('点击取消')) // 触发catch失败回调
    }
    // 确认
    function submitCallback () {
      render(null, div) // 销毁组件
      resolve() // 触发成功回调
    }
    const vnode = createVNode(XtxConfirm, { title, text, cancelCallback, submitCallback })// 对象传props，可以传函数
    // 把dom节点渲染到容器上
    render(vnode, div)
  })
}
